<template>
	<view class="content">
		<view class="sm_top" @click="goback">
			<image :src="imgUrl+'/static/wap/img/whiteBack.png'" mode=""></image>
			扫一扫</view>
		<view class="scan_con">
			<text class="scan_tit">二维码/条形码</text>
			<!-- <view class="scan_code">
				 <image class="code_img" :src="imgUrl+'/static/wap/infoImg/tuceng.png'" @click="scanCode"></image> 
				
			</view> -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="btn" @click="scanCodeelectric">扫码绑定电表</view>
			<view class="btn" @click="scanCodewater">扫码绑定水表</view>
			 <!-- #endif -->
			  <!-- #ifdef H5 -->
<!-- 			 <view class="btn" @click="scanCodeelectricH5">扫码绑定电表</view>
			 <view class="btn" @click="scanCodewaterH5">扫码绑定水表</view> -->
			 <view class="btn" @click="newScanCodeelectricH5">扫码绑定电表</view> 
			 <view class="btn" @click="newScanCodewaterH5">扫码绑定水表</view>
			 <!-- #endif -->
		</view>
		 
	</view>
</template>

<script>
	import util from '../../static/util.js'
	//#ifdef H5
	var jweixin = require('../../components/jweixin-module/index.js');
	//#endif
	export default {
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				urlStr:""
			};
		},
		onShow(){
			// alert(location.href.split("#")[0])
			//#ifdef H5
			this.urlStr=location.href.split("#")[0]
			//#endif
			// readysuc  readyerr saomasuc saomaerr
			// uni.removeStorageSync('readysuc');
			// uni.removeStorageSync('readyerr');
			// uni.removeStorageSync('saomasuc');
			// uni.removeStorageSync('saomaerr');
			// console.log("onshow")
			// var that=this;
			// 	that.ajax({
			// 		url:'api/user/getSignPackage',
			// 		success:function(res){
			// 			console.log(typeof res.data)
			// 			console.log(res.data.appId)
			// 			console.log(res.data.timestamp)
			// 			console.log(res.data.nonceStr)
			// 			if(typeof res.data== 'string'){
			// 				res.data=JSON.parse(res.data)
			// 			}
			// 			//#ifdef H5
			// 			jweixin.config({
			// 			   debug: true,
			// 			   appId: res.data.appId, // 必填,公众号的唯一标识
			// 			   timestamp: res.data.timestamp, // 必填,生成签名的时间戳
			// 			   nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
			// 			   signature: res.data.signature, // 必填,签名
			// 			   jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
			// 			});
			// 			jweixin.ready(function(){
			// 			    console.log("配置成功")  
			// 				uni.setStorage({
			// 				    key: 'readysuc',
			// 				    data: '成功',
			// 				    success: function () {
			// 				        console.log('success');
			// 				    }
			// 				});
			// 			});
			// 			jweixin.error(function(err){
			// 				console.log("配置失败")
			// 				console.log(err)
			// 				uni.setStorage({
			// 				    key: 'readyerr',
			// 				    data: err,
			// 				    success: function () {
			// 				        console.log('success');
			// 				    }
			// 				});
			// 			})
			// 			//#endif	
			// 		}
			// 	  })
		},
		methods:{
			goback(){
				uni.switchTab({
					url:"../index/index"
				})
			},
			newScanCodeelectricH5(){
				this.renderConfig(this.scanCodeelectricH5)
			},
			newScanCodewaterH5(){
				this.renderConfig(this.scanCodewaterH5)
			},
			renderConfig(fx){
				uni.removeStorageSync('readysuc');
				uni.removeStorageSync('readyerr');
				uni.removeStorageSync('saomasuc');
				uni.removeStorageSync('saomaerr');
				console.log("onshow")
				var that=this;
					that.ajax({
						url:'api/user/getSignPackage',
						data:{
							url:that.urlStr
						},
						success:function(res){
							console.log(typeof res.data)
							console.log(res.data)
							console.log(res.data.appId)
							console.log(res.data.timestamp)
							console.log(res.data.nonceStr)
							if(typeof res.data== 'string'){
								res.data=JSON.parse(res.data)
							}
							//#ifdef H5
							jweixin.config({
							   debug: false,
							   appId: res.data.appId, // 必填,公众号的唯一标识
							   timestamp: res.data.timestamp, // 必填,生成签名的时间戳
							   nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
							   signature: res.data.signature, // 必填,签名
							   jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
							});
							jweixin.ready(function(){
							    console.log("配置成功")  
								uni.setStorage({
								    key: 'readysuc',
								    data: '成功',
								    success: function () {
								        console.log('success');
										if(fx){
											fx()
										}
								    }
								});
							});
							jweixin.error(function(err){
								console.log("配置失败")
								console.log(err)
								uni.setStorage({
								    key: 'readyerr',
								    data: err,
								    success: function () {
								        console.log('success');
								    }
								});
							})
							//#endif	
						}
					  })
			},
			scanCodeelectric(){
				var that=this;
				// 允许从相机和相册扫码
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						that.bindElectric(res.result,1)
				    }
				});
			},
			scanCodewater(){
				var that=this;
				// 允许从相机和相册扫码
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						that.bindElectric(res.result,2)
				    }
					
				});
			},
			bindElectric(code,num){
				var that=this;
				that.ajax({
					url:'api/Electric/bindElectric',
					data:{
						code:code,
						type:num,
					},
					success:function(res){
						if(res.code==200){

							setTimeout(function(){
							uni.showToast({
							    title: '绑定成功',
							    duration: 2500,
								success:function(){
									setTimeout(function(){
										uni.switchTab({
											url:'/pages/index/index'
										})
									},10)
								}
							});
							},20)
						}else{
							setTimeout(function(){
								uni.showToast({
									title:res.msg,
									icon:"none",
									duration:2500
								});
							},20)
							// uni.showToast({
							//     title: '绑定失败',
							//     duration: "6000"
							// });
							// uni.showToast({
							// 	title:res.msg,
							// 	duration:5000
							// });
						}
					}
				  })
			},
			scanCodeelectricH5(){
				//#ifdef H5
				console.log("h5绑定电表")
				var that=this;
				jweixin.scanQRCode({ // 微信扫一扫接口
				   //desc: 'scanQRCode desc',
				   needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				   scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
				   success: function (res) {
					 console.log(res.resultStr)
					 uni.setStorage({
					     key: 'saomasuc',
					     data: res.resultStr,
					     success: function () {
					         console.log('success');
					     }
					 });
					 var a=res.resultStr.split(',');
					 var code=a[1]
					// alert(code)
					that.bindElectric(code,1)
				 },
				 fail:function(err){
					 uni.setStorage({
					     key: 'saomaerr',
					     data: err,
					     success: function () {
					         console.log('success');
					     }
					 });
				 }
			})
			//#endif
		},
		scanCodewaterH5(){
			//#ifdef H5
			console.log("h5绑定水表")
			var that=this;
			jweixin.scanQRCode({ // 微信扫一扫接口
				   //desc: 'scanQRCode desc',
				   needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				   scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
				   success: function (res) {
					 console.log(res.resultStr)
					 var a=res.resultStr.split(',');
					 var code=a[1]
						that.bindElectric(code,2)
				 },
				 fail(err){
					console.log(err) 
				 }
			})
			//#endif
		}
	 }
	}
</script>

<style lang="less" scoped>
	uni-page-body{ 
		height: 100vh; 
	}
	.content{
		height: 100vh;
		overflow: hidden;
		background-color: #1A919D;
	}
	.btn{
		width: 440rpx;
		line-height: 80rpx;
		background-color:#FFFFFF;
		border-radius: 40rpx;
		text-align: center;
		color: #333333;
		font-size: 36rpx;
	}
	.scan_con{ 
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 180rpx;
		width: 440rpx;
		height: 600rpx;
		text-align: center; 
		.scan_tit{
			font-size: 35rpx;
			color: #fff;
		}
		.scan_code{ 
			.code_img {
				width: 100%;
				height: 430rpx;
			}
		}
	}
	.sm_top{
		height: 80rpx;
		font-size: 36rpx;
		background-color: rgb(26, 145, 157);
		color: #FFFFFF;
		position: relative;
		text-align: center;
		line-height: 80rpx;
		padding-top: var(--status-bar-height);
		&>image{
			width: 34rpx;
			height: 34rpx;
			position: absolute;
			top: 55%;
			// transform: translateY(-50%);
			left: 27rpx;
		}
	} 
</style>
